<template>
  <div class="view-wrapper">
    <div class="headinfomation">
      <span>商家编号：{{integralId}} > {{name}}</span>
      <el-button size="small" @click="back">返回</el-button>
    </div>
    <div class="detail_box">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="积分情况" name="first">
          <situation />
        </el-tab-pane>
        <el-tab-pane label="用户明细" name="second">
            <user-details />
        </el-tab-pane>
        <el-tab-pane label="积分明细" name="third">
            <points-detail />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import situation from "./components/situation";
import UserDetails from "./components/UserDetails";
import PointsDetail from "./components/PointsDetail";
export default {
  components: {
    situation,
    UserDetails,
    PointsDetail
  },
  data() {
    return {
      activeName: "first",
      integralId:"",
      merchantId:"",
      name:""
    };
  },
  created() {
    
  },
  mounted(){
    console.log(this.$route.query)
    let query = this.$route.query
    this.integralId = query.integralId
    this.merchantId = query.merchantId
    this.name = query.name
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    back(){
      this.$router.push({
        path: "/merchants/merchants-detail",
        query: {
          id: this.merchantId,
          activeName: 'third', 
        },
      });
    },
  },
};
</script>
<style scoped>
.headinfomation {
  padding: 0 0px 20px;
}
.headinfomation span {
  margin-right: 20px;
  color: #303133;
  font-size: 14px;
}
.detail_box {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 4px 12px 0px rgba(1, 41, 99, 0.06);
  padding: 10px 32px;
}
</style>